@include desktop {
  html {
    &.has-aside-left {
      &.has-aside-expanded {
        nav.navbar, body {
          padding-left: $aside-width;
        }
      }
      nav.navbar, body {
        @include transition(padding-left);
      }
      .aside.is-placed-left {
        display: block;
      }
    }
  }

  .aside.is-expanded {
    width: $aside-width;

    .menu-list {
      @include icon-with-update-mark($aside-icon-width);

      span.menu-item-label {
        display: inline-block;
      }

      li.is-active {
        ul {
          display: block;
        }
      }
    }
  }
}

@include touch {
  #app, nav.navbar {
    @include transition(margin-left);
  }
  .aside {
    @include transition(left);
  }
  html.has-aside-mobile-transition {
    body {
      overflow-x: hidden;
    }
    body, #app, nav.navbar {
      width: 100vw;
    }
    .aside {
      width: $aside-mobile-width;
      display: block;
      left: $aside-mobile-width * -1;

      .image {
        img {
          max-width: $aside-mobile-width * .33;
        }
      }

      .menu-list {
        li.is-active {
          ul {
            display: block;
          }
        }
        a {
          @include icon-with-update-mark($aside-icon-width);

          span.menu-item-label {
            display: inline-block;
          }
        }
      }
    }
  }
  html.has-aside-mobile-expanded {
    #app, nav.navbar {
      margin-left: $aside-mobile-width;
    }
    .aside {
      left: 0;
    }
  }
}

.menu {
  font-size: 1rem;
  overflow: auto;
  height: calc(100vh - 3.25rem);
  .menu-list a.is-active{
    background: transparent;
    color: $primary;
  }
  .menu-list a:hover {
    //background-color: #262930;
    //background-color: $primary-hover;
    background-color: transparent;
    color: $primary-hover;
  }
  .menu-list a {
    border-radius: 0;
    color: $aside-input-color;
    display: block;
  }
  .menu-list a {
    border-radius: 0;
    display: block;
    .icon-text{
      line-height: 1.5rem;
      .name{
        width: 90%;
      }
    }
  }
}


nav.navbar {
  box-shadow: 0 1px 0 rgba(24, 28, 33, 0.04);
}
nav.navbar .navbar-item.has-divider {
  border-right: 1px solid rgba(219, 219, 219, 0.25);
}
nav.navbar .navbar-item.has-dropdown {
  padding-right: 0;
  padding-left: 0;
}

.is-placed-left {
  display: block;
}
.aside {
  //display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  height: 100vh;
  padding: 0;
  box-shadow: $aside-box-shadow;
  background: $aside-background-color;
  .icon{
    width: 1rem !important;
  }
  .aside-tools {
    display: flex;
    flex-direction: row;
    width: 100%;
    background-color: $aside-tools-background-color;
    color: $aside-tools-color;
    line-height: $navbar-height;
    height: $navbar-height;
    padding-left: $default-padding * .5;
    flex: 1;

    .icon {
      margin-right: $default-padding * .5;
    }
  }
  /*.menu-label:not(:last-child){
    margin-bottom: 1em;
  }
  .menu-label,.icon-text{
    padding: 0 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }*/

}
.aside.is-expanded {
  width: $aside-width;
}
